<template>
    <view>
        <!-- <back></back> -->
        <view style="padding: 0 20rpx" v-for="item in list">
            <view class="info u-flex">
                <image class="in_img" :src="item.image" mode="aspectFill"></image>
                <view class="in_rig">
                    <view class="in_bla">{{ item.title }}</view>
                    <view class="in_gre">{{ item.difference }}</view>
                </view>
            </view>
            <view class="fen info">
                <view class="fen_tit in_bla"> 请为该商品打分 </view>
                <u-rate
                    gutter="37"
                    size="36"
                    active-color="#FF4E02"
                    inactive-color="#BEBEBE"
                    :count="count"
                    v-model="item.state"
                ></u-rate>
                <textarea
                    v-model="item.comment"
                    placeholder-style="color: #BEBEBE;"
                    placeholder="从多个角度评估产品可以帮助更多需要该商品的人，请留下您的评价~"
                ></textarea>
                <view class="u-flex-wrap" style="display: flex">
                    <view style="margin: 0 20rpx 28rpx 0" class="-flex-center u-flex-col">
                        <view class="fen_two u-flex-center">
                            <image
                                src="@/static/wImg/phone.png"
                                @click="uploadImg(item)"
                                class="img_ph"
                            ></image>
                        </view>
                        <view class="grey">点击上传照片</view>
                    </view>
                    <view
                        class="fen_pho u-flex-center"
                        @click="yu(it, ind)"
                        v-for="(it, ind) in item.imgList"
                    >
                        <image :src="it" class="img_tu" mode="aspectFill"></image>
                        <view @click.stop="delFn(item, ind)">
                            <u-icon name="close" color="#8c8c8c" class="img_clo"></u-icon>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view style="height: 200rpx"></view>
        <view class="foot" :style="'padding-bottom:' + bottom + 'px'">
            <view class="btn u-flex-center" @tap="$u.throttle(submit, 1700)"> 发布评价 </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            count: 5,
            value: 2,
            bottom: 0,
            id: "",
            list: [],
            shop_id: "",
        };
    },
    onLoad(options) {
        this.id = options.id;
        this.info();
        let res = uni.getSystemInfoSync();
        if (res.safeAreaInsets.bottom == 0) {
            this.bottom = 13;
        } else {
            this.bottom = res.safeAreaInsets.bottom;
        }
    },
    methods: {
        info() {
            this.$u
                .get("/api/wanlshop/order/getOrderInfo", {
                    id: this.id,
                })
                .then((res) => {
                    if (res.code == 1) {
                        this.list = res.data.goods;
                        this.shop_id = res.data.shop_id;

                        for (let i = 0; i < this.list.length; i++) {
                            this.$set(this.list[i], "imgList", []);
                            this.$set(this.list[i], "state", "");
                        }
                    }
                });
        },
        uploadImg(item) {
            let that = this;
            uni.chooseImage({
                count: 1,
                sizeType: ["original", "compressed"],
                success: function (res) {
                    uni.uploadFile({
                        url: "https://same.ascetic.top/api/common/upload", //上传
                        filePath: res.tempFilePaths[0],
                        name: "file",
                        header: {
                            token: uni.getStorageSync("token"),
                        },
                        success: function (resT) {
                            let data = JSON.parse(resT.data);
                            item.imgList.push(data.data.fullurl);
                        },
                        fail: function (err) {},
                    });
                },
            });
        },
        delFn(item, ind) {
            item.imgList.splice(ind, 1);
        },
        yu(it, ind) {
            // 预览图片
            let imgsArray = [];
            imgsArray.push(it);
            uni.previewImage({
                current: ind,
                urls: imgsArray,
            });
        },
        submit() {
            let arr = [];
            this.list.map((item) => {
                let obj = {
                    comment: item.comment,
                    difference: item.difference,
                    goods_id: item.goods_id,
                    id: item.id,
                    image: item.image,
                    imgList: item.imgList,
                    state: item.state,
                    title: item.title,
                };
                arr.push(obj);
            });
            let shop = {};
            shop.id = this.shop_id;
            this.$u
                .post("/api/wanlshop/order/commentOrder", {
                    goodsList: arr,
                    order_id: this.id,
                    shop: shop,
                })
                .then((res) => {
                    if (res.code == 1) {
                        this.$u.toast(res.msg);
                        setTimeout(() => {
                            uni.navigateBack();
                        }, 1500);
                    } else {
                        this.$u.toast(res.msg);
                    }
                });
        },
    },
};
</script>

<style lang="scss" scoped>
.info {
    background: #fff;
    border-radius: 10rpx;
    padding: 30rpx 20rpx;
    margin-top: 20rpx;

    .in_img {
        width: 146rpx;
        height: 146rpx;
        border-radius: 10rpx;
        margin-right: 20rpx;
    }

    .in_rig {
        flex: 1;
        height: 146rpx;
    }

    .in_bla {
        font-weight: bold;
        font-size: 32rpx;
        color: #333;
        margin-bottom: 30rpx;
    }

    .in_gre {
        font-size: 28rpx;
        color: #b0b0b0;
    }
}

.fen {
    textarea {
        margin-top: 48rpx;
        line-height: 50rpx;
        font-size: 28rpx;
        height: 120rpx;
        margin-bottom: 18rpx;
    }

    .grey {
        font-size: 24rpx;
        color: #bebebe;
        margin: 0 auto;
        margin-top: 20rpx;
    }

    .fen_two {
        width: 168rpx;
        height: 168rpx;
        background: #f6f6f6;
        border-radius: 20rpx;
        border: 1rpx solid #d3d3d3;

        .img_ph {
            width: 70rpx;
            height: 63rpx;
        }
    }

    .fen_pho {
        width: 168rpx;
        height: 168rpx;
        border-radius: 20rpx;
        overflow: hidden;
        margin-right: 28rpx;
        margin-bottom: 28rpx;
        position: relative;

        .img_tu {
            width: 100%;
            height: 100%;
        }

        .img_clo {
            position: absolute;
            top: 15rpx;
            right: 15rpx;
        }
    }
}

.foot {
    width: 100%;
    position: fixed;
    bottom: 0;
    padding: 26rpx 60rpx;
    background: #fff;

    .btn {
        width: 632rpx;
        height: 80rpx;
        color: #fff;
        background: linear-gradient(98deg, #606dce 0%, #606dce 100%);
        border-radius: 40rpx;
    }
}
</style>
